<template>
  <mu-container v-loading="loading">
    <mu-row class="padt10">
      <mu-paper :z-depth="1" style="width: 100%" class="round5 ">
        <mu-flex align-items="center">
          <mu-flex>
            <mu-button icon color="primary">
              <mu-icon value="extension"></mu-icon>
            </mu-button>
          </mu-flex>
          <mu-flex fill><h3>{{title}}</h3></mu-flex>
          <mu-flex>
            <div class="padr10" slot="">
              <mu-button small round color="success" @click="save()">
                选择
              </mu-button>
            </div>
          </mu-flex>
        </mu-flex>
      </mu-paper>
    </mu-row>

    <mu-row class="padt10">
      <mu-paper style="width: 100%" :z-depth="1">
        <mu-flex align-items="center" class="padt5 padb5">
          <mu-flex>
            <mu-sub-header>关键词查询：</mu-sub-header>
          </mu-flex>
          <mu-flex fill>
            <mu-text-field :action-click="getList" class="padl10" action-icon="search" solo v-model="search_" placeholder="请输入关键词"></mu-text-field>
          </mu-flex>
        </mu-flex>
        <div v-if="showSearch">
          <mu-row align-items="center">
            <mu-col v-for="(item,index) in searchBox" :key="index" :span="item.width">
              <template v-if="item.type === 'text'">
                <mu-text-field icon="keyboard" solo v-model="where_[item.expression][item.name]" :placeholder="item.helpText"></mu-text-field>
              </template>
              <template v-if="item.type === 'date'">
                <mu-date-input solo icon="access_time" v-model="where_[item.expression][item.name]" :placeholder="item.helpText" type="dateTime" actions full-width landscape></mu-date-input>
              </template>
              <template v-if="item.type === 'select'">
                <mu-select icon="format_indent_increase" class="" :placeholder="item.helpText" filterable v-model="where_[item.expression][item.name]" full-width>
                  <mu-option v-for="(choice,idx) in item.choices" :key="idx" :label="choice.value" :value="choice.id"></mu-option>
                </mu-select>
              </template>
            </mu-col>
            <mu-col v-if="excel">
              <mu-button flat small round color="orange" @click="excelOut()">
                <mu-icon left value="cloud_download"></mu-icon>
                <span class="padr10">导出Excel</span>
              </mu-button>
            </mu-col>
            <mu-col>
              <mu-button flat small round color="primary" @click="getList()">
                <mu-icon left value="search"></mu-icon>
                <span class="padr10">查询</span>
              </mu-button>
            </mu-col>
          </mu-row>
        </div>

      </mu-paper>
    </mu-row>

    <mu-row class="padt10">
      <mu-paper style="width: 100%" :z-depth="1">
        <mu-data-table @row-click="rowClick" @select-change="change" selectable select-all :selects.sync="selects" checkbox :columns="headers" :data="list">

          <template slot="th" slot-scope="column">
            <span>{{column.title}}</span>
          </template>
          <!--          <template slot-scope="scope"></template>-->
          <template slot-scope="scope">
            <td align="center" v-for="(item,index) in header" :key="index">
<!--              <div v-if="$com.isbool(config) && $com.isbool(config[item]) && config[item].listType === 'pic'">-->
<!--                <img @click="()=>{picView = $api.getUrl() + scope.row[item];openDialog = true}" style="max-width: 200px; max-height: 150px;" :src="$api.getUrl() + scope.row[item]" alt="">-->
<!--              </div>-->
<!--              <div v-else>{{guessItem(scope.row,item)}}</div>-->
              {{guessItem(scope.row,item)}}
            </td>
          </template>
        </mu-data-table>
      </mu-paper>
    </mu-row>
    <mu-row class="padt10" v-show="page.limit < page.total">
      <mu-flex justify-content="center">
        <mu-pagination @change="getList" :page-size="page.limit" raised :total="page.total *1" :current.sync="page.page *1"></mu-pagination>
      </mu-flex>
    </mu-row>
  </mu-container>
</template>
<script>
import api from '@/assets/js/api'

export default {
  name: 'entity',
  props: {
    entity: '',
    multi: ''
  },
  data () {
    return {
      title: '选择器',
      loading: true,
      // 实体信息
      en: '',
      // 数据筛选相关
      search_: '',
      where_: undefined,
      order_: {id: 'desc'},
      options_: {
        cat: [
          'Alabama', 'Alaska', 'American Samoa', 'Arizona'
        ]
      },
      // 列表相关数据
      selects: [],

      searchBox: [],
      showSearch: false,
      header: [],
      headers: [],
      list: [],
      page: {total: 0, limit: 10, page: 1}
    }
  },
  methods: {
    getList (page) {
      let _this = this
      _this.loading = true
      // 处理分页信息
      if (page !== undefined) {
        _this.page.page = page
      }
      // 处理条件筛选

      api.post('/admin/' + _this.entity + '/search', {
        page: _this.page.page,
        _where: _this.where_,
        _order: _this.order_,
        _search: _this.search_
      }, function (res) {
        _this.loading = false
        // 实体名称
        _this.title = res.d.title
        // 实体名称
        _this.en = res.d.en
        // 分页数据
        _this.page = res.d.page
        // 处理表头信息-默认处理也可以自己配置
        _this.header = res.d.header
        let config = res.d.config
        if (_this.headers.length === 0) {
          _this.header.map(function (name) {
            let array = name.split('.')
            name = array[0]
            _this.headers.push({title: config[name].cnName, name: name})
          })
          // _this.headers.push({title: '选定', align: 'center', name: 'edit', width: 180})
        }
        // 列表数据// 对象处理
        res.d.lists.map(function (row) {
          for (let i in row) {
            // 检测时间类型
            var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])T(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d(\+08:00)$/
            var regExp = new RegExp(reg)
            if (regExp.test(row[i])) {
              // alert("时间格式不正确,正确格式为: 2014-01-01 12:00:00 ");
              row[i] = _this.$com.str2time(row[i])
            }
            if (row[i] === true || row[i] === false) {
              row[i] = row[i] ? '是' : '否'
            }
          }
        })
        _this.list = res.d.lists

        // 设置筛选数据
        if (res.d.searchBox === undefined) {
          _this.showSearch = false
        } else {
            _this.showSearch = res.d.searchBox.show
            _this.excel = res.d.searchBox.excel
            if (_this.where_ === undefined) {
              _this.where_ = res.d.searchBox.attr
              _this.searchBox = res.d.searchBox.box
            }
        }
      })
    },
    guessItem (row, itemName) {
      let _this = this
      if (_this.$com.isbool(itemName)) {
        itemName = itemName.split('.')
        if (typeof itemName === 'string') {
          return row[itemName]
        } else {
          let parent = row
          let value = ''
          for (let i in itemName) {
            // console.log(parent)
            value = parent[itemName[i]]
            parent = parent[itemName[i]]
          }
          return value
        }
      } else {
        return ''
      }
    },
    change (cur) {
      let multi = this.multi
      if (multi === true) {
      } else {
        // 取出一个
        this.selects = [cur]
      }
    },
    save () {
      if (this.selects.length === 0) {
        this.$emit('cancel')
        return
      }
      let _this = this
      let data = []
      let multi = this.multi
      if (multi === true) {
        this.selects.map(function (index) {
          data.push(_this.list[index])
        })
        this.$emit('change', data)
      } else {
        // 取出一个
        this.$emit('change', this.list[this.selects[0]])
      }
    },
    rowClick (index, row, event) {
      console.log(index)
      console.log(row)
      console.log(event)
      let i = this.selects.indexOf(index)
      console.log(i)
      if (i === -1) {
        // 没有找到则新增
        this.selects.push(index)
        let multi = this.multi
        if (multi === true) {
          this.selects.push(index)
        } else {
          this.selects = [index]
        }
      } else {
        this.selects.splice(i, 1)
      }
    }
  },
  created () {
    console.log('create')
  },
  mounted () {
    this.getList()
    console.log(this.entity)
  }
}
</script>

<style scoped>

</style>
